<template>
  <div class="login">
    <div class="login-con">
      <a-card title="欢迎登录">
        <a-form :form="form" class="login-form">
          <a-form-item laba="用户名">
            <a-input
              v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入用户名' }]}
              ]"
              v-model.trim="user.username"
              placeholder="请输入用户名"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>
          <a-form-item laba="密码">
            <a-input
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }]}
              ]"
              v-model.trim="user.password"
              type="password"
              placeholder="请输入密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox :defaultChecked="remember">记住密码</a-checkbox>
            <a class="login-form-forgot" href>忘记密码</a>
            <a-button style="width:100%" type="primary" size="large" @click="login">登录</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      remember: true,
      user: {
        username: "",
        password: ""
      },
      form: this.$form.createForm(this)
    };
  },
  methods: {
    login() {
      let me = this;
      me.form.validateFields(err => {
        if (!err) {
          me.$http.ajax({
            url: "admin/login",
            data: me.user,
            success: res => {
              console.log(res);
              me.$store.commit("setLoginInfo", res);
              me.$router.push({ name: "home" });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  position: raative;
  &-con {
    position: absolute;
    right: 360px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}

.login .login-form {
  max-width: 300px;
}
.login .login-form-forgot {
  float: right;
}
.login .login-form-button {
  width: 100%;
}
</style>

